<!DOCTYPE html>
<html>
<head>
    <title>BootstrapValidator demo</title>

    <link rel="stylesheet" href="../../vendor/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" href="../../dist/css/formValidation.css"/>

    <script type="text/javascript" src="../../vendor/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="../../vendor/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../dist/js/formValidation.js"></script>
    <script type="text/javascript" src="../../dist/js/framework/bootstrap.js"></script>
    <script type="text/javascript" src="../../src/js/addon/requiredIcon.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-8 col-sm-offset-2">
                <div class="page-header">
                    <h2>requiredIcon add-on</h2>
                </div>

                <form id="defaultForm" method="post" class="form-horizontal" action="/demo/target.php"
                        data-bv-addons="requiredIcon"
                        data-bv-addons-requiredicon-icon="glyphicon glyphicon-asterisk">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">Name</label>
                        <div class="col-sm-5">
                            <input type="text" class="form-control" name="name" value="Product name" />
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label">Description</label>
                        <div class="col-sm-5">
                            <textarea class="form-control" name="description" rows="5"></textarea>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label">Price</label>
                        <div class="col-sm-3">
                            <div class="input-group">
                                <span class="input-group-addon">$</span>
                                <input type="text" class="form-control" name="price" />
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label">Quantity</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" name="quantity" />
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-5 col-sm-offset-3">
                            <button type="submit" class="btn btn-default">Add product</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

<script type="text/javascript">
$(document).ready(function() {
    // You can enable and set add-on options via HTML attributes
    // <form
    //      data-bv-addons="requiredIcon, otherAddOn, anotherOne"
    //      data-bv-addons-requiredicon-icon="glyphicon glyphicon-asterisk">
    $('#defaultForm')
        .bootstrapValidator({
            addOns: {
                requiredIcon: {
                    icon: 'glyphicon glyphicon-asterisk'
                }
            },
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                name: {
                    validators: {
                        notEmpty: {
                            message: 'The name is required'
                        }
                    }
                },
                description: {
                    validators: {
                        stringLength: {
                            max: 300,
                            message: 'The description must be less than 300 characters long'
                        }
                    }
                },
                price: {
                    validators: {
                        notEmpty: {
                            message: 'The price is required'
                        },
                        numeric: {
                            message: 'The price must be a number'
                        }
                    }
                },
                quantity: {
                    validators: {
                        notEmpty: {
                            message: 'The quantity is required'
                        },
                        integer: {
                            message: 'The quantity must be a number'
                        }
                    }
                }
            }
        });
});
</script>
</body>
</html>